<template>
  <div>
    <h2>Movie组件</h2>
    <button @click="getMovieList">获取热门电影</button>
    <p>Count组件count的最终值:{{ count }}</p>
    <p>热门电影排行</p>
    <ul>
      <li v-for="item in movieList" :key="item.tvId">
        {{ item.albumName }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Movie",
});

</script>

<script lang="ts" setup>
// 引入store中的hooks方法
import useMovieStore from '../../store/movie'
import useCountStore from '../../store/count'
import {storeToRefs} from "pinia";

// 获取store对象
const movieStore = useMovieStore();
const countStore = useCountStore();

// 解构出store对象中的值
const {movieList} = storeToRefs(movieStore)
const {count} = storeToRefs(countStore)

// 解构出store对象中的actions的方法
const {getMovieList} = movieStore
</script>

<style scoped>
h2 {
  background-color: indianred;
}
</style>